<template>
  <div>
    <div class="pointer" @click="showInfo = true" style="color: blue">
      {{ data.customerNameShort }}
    </div>
    <div class="pointer"  >
      {{ data.customerCode }}
    </div>
    <el-dialog title="客户详情" :visible.sync="showInfo">
      <el-row :gutter="20" class="text-sm padding-left-lg">
        <el-col :span="12">
          <div>
            {{ m("customer_login_name") }} : {{ data.customerLoginName }}
          </div>
          <div>{{ m("customer_pass_word") }} : {{ data.passwd }}</div>
          <div>
            {{ m("customer_name_short") }} : {{ data.customerNameShort }}
          </div>
          <el-row style="margin-left:13px;" v-if="data.customerSpecial!=null&&data.customerSpecial!=''">
            {{ m("special_scene_content") }} :
            <el-tooltip effect="light" placement="left" >
              <div slot="content">
                <div
                  v-html="data.customerSpecial"
                  style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
                ></div>
              </div>
              <img src="http://192.168.180.22:9999/zentao/file-read-9311.png" @click="findSpecial">
<!--              <i-->
<!--                style="font-size:20px"-->
<!--                class="el-icon-info"-->
<!--              ></i>-->
            </el-tooltip>
          </el-row>
          <div>
            {{ m("enterprise_credit_code") }} : {{ data.enterpriseCreditCode }}
          </div>
          <div>
            {{ m("registered_address") }} : {{ data.registeredAddress }}
          </div>
          <div
            v-if="
              data.businessLicensePicUrl &&
                data.businessLicensePicUrl !== null &&
                data.businessLicensePicUrl !== ''
            "
          >
            {{ m("business_license_picurl") }} :
            <el-image
              style="width: 60px; height: 60px"
              :src="url"
              :preview-src-list="srcList"
            ></el-image>
          </div>
          <div>{{ m("contract_code") }} : {{ data.contractCode }}</div>
          <div>{{ m("current_debt") }} : {{ data.currentDebt }}</div>
          <div>
            {{ m("account_period") }} :
            {{ m(accountPeriodSource[data.accountPeriod]) }}
          </div>
          <div>{{ m("last_payment_date") }} : {{ data.lastPaymentDate }}</div>
          <div>{{ m("salesman") }} : {{ userSource[data.salesman] }}</div>
          <div>
            {{ m("oceanshipping_error_range") }} :
            {{ data.oceanshippingErrorRange }}
          </div>
          <div>
            {{ m("customer_type") }} :
            {{ m(customerTypeSource[data.customerType]) }}
          </div>
          <div>
            {{ m("isnecessary_examine") }} :
            {{ isOrNotNotDefSource[data.isNecessaryExamine] }}
          </div>
          <div>
            {{ m("customer_level") }} :
            {{ customerLevelSource[data.customerLevel] }}
          </div>
          <div>
            {{ m("logistics_telephone") }} : {{ data.logisticsTelephone }}
          </div>
          <div>{{ m("logistics_qq") }} : {{ data.logisticsQQ }}</div>
          <div>{{ m("finance_telephone") }} : {{ data.financeTelephone }}</div>
          <div>{{ m("finance_qq") }} : {{ data.financeQQ }}</div>
          <div>
            {{ m("is_check_price") }} :
            {{ isOrNotNotDefSource[data.isCheckPrice] }}
          </div>
          <div>
            {{ m("first_delivery_time_1") }} : {{ data.firstDeliveryTime }}
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            {{ m("registered_mobile_phone_number") }} :
            {{ data.registeredMobilePhoneNumber }}
          </div>
          <div>{{ m("registered_attn") }} : {{ data.registeredAttn }}</div>
          <div>{{ m("customer_full_name") }} : {{ data.customerFullName }}</div>
          <div>{{ m("legal_person") }} : {{ data.legalPerson }}</div>
          <div>{{ m("business_address") }} : {{ data.businessAddress }}</div>
          <div>
            {{ m("is_contract") }} : {{ isOrNotNotDefSource[data.isContract] }}
          </div>
          <div>{{ m("contract_life") }} : {{ data.contractLife }}</div>
          <div>{{ m("account_balance") }} : {{ data.accountBalance }}</div>
          <div>
            {{ m("account_period_date") }} :
            {{ accountPeriodSource[data.accountPeriodDate] }}
          </div>
          <div>{{ m("extend_credit") }} : {{ data.extendCredit }}</div>
          <div>
            {{ m("customer_service") }} : {{ userSource[data.customerService] }}
          </div>
          <div>
            {{ m("airshipping_error_range") }} :
            {{ data.airshippingErrorRange }}
          </div>
          <div>
            {{ m("client_show_fee") }} :
            {{ isOrNotNotDefSource[data.clientShowFee] }}
          </div>
          <div>
            {{ m("is_permit") }} : {{ isOrNotNotDefSource[data.isPermit] }}
          </div>
          <div>
            {{ m("logistics_attn_name") }} : {{ data.logisticsAttnName }}
          </div>
          <div>{{ m("logistics_email") }} : {{ data.logisticsEmail }}</div>
          <div>{{ m("finance_attn_name") }} : {{ data.financeAttnName }}</div>
          <div>{{ m("finance_email") }} : {{ data.financeEmail }}</div>
          <div>
            {{ m("is_push_data") }} : {{ isOrNotNotDefSource[data.isPushData] }}
          </div>
          <div>{{ m("last_delivery_time") }} : {{ data.lastDeliveryTime }}</div>
          <div>
            {{ m("enable_cesgroup_service") }} :
            {{ isOrNotNotDefSource[data.isCesGroup] }}
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import * as constant from "@/store/yg/common/constant";
export default {
  props: ["data"],
  data() {
    return {
      showInfo: false,
      fileUrl: constant.FILE_SERVER,
      accountPeriodSource: {},
      customerGroupSource: {},
      customerLevelSource: {},
      customerTypeSource: {},
      isOrNotNotDefSource: {},
      userSource: {},
      url: "",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      ]
    };
  },
  mounted() {
    // console.log("this.data :>> ", this.data);
    let list = JSON.parse(
      localStorage.getItem("main_#/main/customer__info__list")
    );
    if(list && list.sources){

      if (list.sources.accountPeriodSource) {
        this.accountPeriodSource = list.sources.accountPeriodSource;
      }
      if (list.sources.customerGroupSource) {
        this.customerGroupSource = list.sources.customerGroupSource;
      }
      if (list.sources.customerLevelSource) {
        this.customerLevelSource = list.sources.customerLevelSource;
      }
      if (list.sources.customerTypeSource) {
        this.customerTypeSource = list.sources.customerTypeSource;
      }
      if (list.sources.isOrNotNotDefSource) {
        this.isOrNotNotDefSource = list.sources.isOrNotNotDefSource;
      }
      if (list.sources.userSource) {
        this.userSource = list.sources.userSource;
      }
    }
    if (
      this.data.businessLicensePicUrl &&
      this.data.businessLicensePicUrl !== null &&
      this.data.businessLicensePicUrl !== ""
    ) {
      if (this.data.businessLicensePicUrl.indexOf("_") !== -1) {
        this.url = this.fileUrl + this.data.businessLicensePicUrl;
        this.srcList[0] = this.fileUrl + this.data.businessLicensePicUrl;
      } else {
        let path = `customer_business_license/`;
        this.url = this.fileUrl + path + this.data.businessLicensePicUrl;
        this.srcList[0] = this.fileUrl + path + this.data.businessLicensePicUrl;
      }
    }
  },
  methods: {
    findSpecial(){
      console.log(this.data.id)
      let n = [
        {
          field: "customerId",
          value: this.data.id,
        }
      ];
      let node = JSON.stringify(n);
window.open("/#/main/setting__customerspecialscenecontent__list?customerId="+node,
      "_blank");
    },
    m(k) {
      return m(k, true);
    },
  }
};
</script>

<style scoped></style>
